<script setup lang="ts">
import { NMenu, NIcon } from 'naive-ui'
import { useRouter } from 'vue-router'
import { ref, h } from 'vue'
import { Home24Regular, Notebook24Regular } from '@vicons/fluent'
import type { Component } from 'vue'

const router = useRouter()
const activeKey = ref<string>('home')

function renderIcon(icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

// 导航菜单
const menuOptions = [
  {
    label: 'Home',
    key: 'home',
    icon: renderIcon(Home24Regular),
  },
  {
    label: 'Practice',
    key: 'practice',
    icon: renderIcon(Notebook24Regular),
  },
]

const handleUpdateValue = (key: string) => {
  activeKey.value = key
  router.push({ name: key })
}

const goHome = () => {
  router.push({ name: 'home' })
}
</script>

<template>
  <header
    class="sticky top-0 z-50 backdrop-blur-sm bg-white/80 dark:bg-dark-800/80 border-b border-gray-200 dark:border-gray-800"
  >
    <div class="max-w-7xl mx-auto">
      <div class="flex items-center justify-between h-16 px-4">
        <!-- Logo区域 -->
        <div class="flex items-center gap-2 cursor-pointer" @click="goHome">
          <img src="@/assets/logo.svg" alt="Vue Logo" class="w-8 h-8" />
          <div
            class="text-2xl font-bold bg-gradient-to-r from-blue-500 to-violet-500 bg-clip-text text-transparent"
          >
            myVue3
          </div>
        </div>

        <!-- 导航菜单 -->
        <NMenu
          v-model:value="activeKey"
          mode="horizontal"
          :options="menuOptions"
          @update:value="handleUpdateValue"
          class="flex-1 justify-end"
        />
      </div>
    </div>
  </header>
</template>

<style>
.n-menu.n-menu--horizontal {
  height: 100%;
  line-height: 64px;
  background-color: transparent;
  font-size: 16px;
  display: flex;
  justify-content: flex-end;
}

.n-menu .n-menu-item-content {
  font-weight: 500;
  height: 100%;
}

.n-menu .n-menu-item-content__icon {
  font-size: 24px;
}

.n-menu .n-menu-item {
  height: 100%;
  padding: 0 20px;
}

.n-menu .n-menu-item-content:not(.n-menu-item-content--selected)::before {
  display: none !important;
}
</style>
